<template>
    <div class="home-swipe">
        <van-search v-model="search" placeholder="请输入搜索关键词" input-align="center" @search="onSearch"/>
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(item,index) in bannerData" :key="index">
            <!-- <img :src="item.picUrl" alt=""> -->
            <van-image :src="item.picUrl" lazy-load radius="1em"/>
        </van-swipe-item>
        </van-swipe>
    </div>
</template>
<script>
import { Toast } from 'vant';
// import axios from "axios";
export default {
    data() {
        return {
            search: '',
            bannerData: [],//存放api获取到的轮播数据
        };
    },
    created(){
    this.getBanner();
},
    methods: {
        onSearch(val){
            Toast(val);
        },
        getBanner() {//网络请求的方法
            this.$request ('get','/recommend/banner')
            .then(res=>{
                console.log(res)
                if(res.result == 100){
                    this.bannerData = res.data;
                }
            })
            .catch(function (error){
                console.log(error)
            })
       
        }

// mounted(){
//   this.onSearch(val) {
//     Toast(val);
//   },
}
    }

</script>
<style scoped>
/* .my-swipe .van-swipe-item img{
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed; 
    width: 100%;
} */
</style>